<template>
	<view class="order-list" :class="themeName">
		
		<!-- Tabs -->
		<u-tabs
		  :list="tabsList" 
		  :is-scroll="false" 
		  :height="80"
		  :active-color="themeColor"
		  :bar-style="{top: '100%'}"
		  :current="tabsIndex" 
		  @change="changeCurrentTab"
		/>
		
		<!-- Order Lists -->
		<block v-for="(tabItem, tabIndex) in tabsList" :key="tabItem['sign']">
			<mescroll-contain
			  v-if="currentTab['sign'] === tabItem['sign']"
			  top="80rpx"
			  :ref="'scroll' + '-' + tabItem['sign']"
			  :up-option="{
				  noMoreSize: 3,
				  empty: {
				  	icon: '/static/images/empty/order.png',
				  	tip: '暂无订单~',
				  	fixed: true
				  }
			  }"
			  @upcallback="upCallback($event, tabItem['sign'])" 
			>
				<view class="order-contain">
					<view
					  class="order"
					  v-for="orderItem in tabsList[tabIndex].list" 
					  :key="orderItem.id"
					>
						<!-- Order Header -->
						<view class="order-header">
							
							<!-- S 订单Tag -->
							<template v-if="orderItem.delivery_type === 2">
								<view class="order-tag order-tag--green">自提</view>
							</template>
							<!-- E 订单Tag -->
							
							<!-- 拼团中 -->
							<template v-if="orderItem.status === 0">
								<view class="order-sn">
									<text class="m-r-10">距离结束</text>
									<count-down :time-end="orderItem.invalid_time" />
								</view>
							</template>
							<!-- 拼团成功 -->
							<template v-if="orderItem.status === 1">
								<view class="order-sn">{{ orderItem.team_end_time }}</view>
							</template>
							<!-- 拼团失败 -->
							<template v-if="orderItem.status === 2">
								<view class="order-sn">{{ orderItem.team_end_time }}</view>
							</template>
							
							<!-- 拼团状态 -->
							<view :class="[
									'order-status', 
									`order-status--${orderStatus[orderItem.status]['style']}`
								]"
							>{{ orderStatus[orderItem.status]['name'] }}</view>
						</view>
						
						<!-- Order Main -->
						<view class="order-main" @tap="goOrderDetail(orderItem.order_id)">
							<!-- Leader -->
							<template v-if="orderItem.identity == 1">
								<view class="leader-icon">团长</view>
							</template>
							<!-- Goods -->
							<goods-card
								shape="rectangle"
								:image="orderItem.image" 
								:contain-style="{ 'border-raius': 0, 'height': '230rpx' }"
								:image-style="{ 'width': '180rpx', 'height': '180rpx' }"
							> 
								<view  slot="name">
									<u-tag 
									  class="m-r-10"
									  :text="orderItem.people_num + '人团'" 
									  mode="plain" 
									  size="mini" 
									  :color="themeColor" 
									/>
									<text>{{ orderItem.name }}</text>
								</view>
								<view class="flex-1 flex-col " slot="default">
									<text class="muted xs m-t-20">{{ orderItem.spec_value_str }}</text>
									<view class="m-t-10 flex row-between">
										<price :content="orderItem.sell_price" mainSize="32rpx" minorSize="24rpx"/>
										<text class="lighter sm">x{{ orderItem.count }}</text>
									</view>
								</view>
							</goods-card>
							<view class="order-desc">
								<text>共{{ orderItem.count }}件商品,应付款:</text>
								<price class="normal lg" :content="orderItem.order_amount" />
							</view>
						</view>
						
						<!-- Order Footer -->
						<view class="order-footer" v-if="!orderItem.pay_status && orderItem.status === 0">
							<view class="operation operation--primary" @click="handlePayment(orderItem.order_id)">去付款</view>
						</view>
					</view>
				</view>
			</mescroll-contain>
		</block>
	</view>
</template>


<script>
	import { apiGoodsTeamHistory } from '@/api/goods'
	import { PaymentStatusEnum } from '@/utils/enum'
	
	const TabsFormEnum = {
		NORMAL: '',		// 全部
		DOING: 0,		// 拼团中
		SUCCESS: 1,		// 拼团成功
		FAIL: 2,		// 拼团失败
	}
	
	export default {
		name: 'GoodsTeamHistory',
		
		data() {
			return {
				// Tabs列表
				tabsList: [{
					sign: 'NORMAL',
					name: '全部',
					list: [],
				}, {
					sign: 'DOING',
					name: '拼团中',
					list: [],	
				}, {
					sign: 'SUCCESS',
					name: '拼团成功',
					list: [],	
				},{
					sign: 'FAIL',
					name: '拼团失败',
					list: [],	
				}],
				tabsIndex: 0,			// Tabs索引
				
				// 订单状态
				orderStatus: {
					0: {
						name: '拼团中',
						style: 'primary',
					},
					1: {
						name: '拼团成功',
						style: 'primary',
					},
					2: {
						name: '拼团失败',
						style: 'muted',
					},
				},
			}
		},
		
		computed: {
			// 当前Tab项
			currentTab() {
				return this.tabsList[this.tabsIndex]
			},
			
			// 映射Tabs项
			mapTabsItem() {
				return sign => this.tabsList.find(item => item['sign'] === sign)
			}
		},
		
		methods: {
			// 更改当前Tab页
			changeCurrentTab(index) {
				this.tabsIndex = index
			},
		
			// 上拉加载更多
			upCallback({ num, size }, sign) {
				const ref = this.$refs['scroll' + '-' + sign][0]
				
				apiGoodsTeamHistory({
					status: TabsFormEnum[sign],
					page_no: num,
					page_size: size,
				}).then(({ lists, page_size, count }) => {
					const tab = this.mapTabsItem(sign)
					if (num === 1) tab.list = []
					tab.list = [...tab.list, ...lists]
					ref.endSuccess(lists.length, count)
				}).catch(err => {
					ref.endBySize()
				})
			},
			
			// 去订单详情
			goOrderDetail(id) {
				this.$Router.push({
					path: '/pages/order_detail/order_detail',
					query: { order_id: id }
				})
			},
			
			// 处理：支付
			handlePayment(orderID) {
				this.$Router.push({
					path: `/pages/payment/payment`,
					query: {
						from: 'order',
						order_id: orderID
					}
				})
			},
		},
		
		onLoad() {
			// 监听全局duringPayment事件
			uni.$on('duringPayment', ({ result }) => {
				
				if (result === PaymentStatusEnum['SUCCESS']) {
					this.$Router.back()
					setTimeout(() => {
						this.$toast({ title: '支付成功' })
						const sign = this.currentTab['sign']
						const ref = this.$refs['scroll' + '-' + sign][0]
						ref.downCallback()
					}, 0.5 * 1000)
				}
			})
		},
		
		onUnload() {
			uni.$off('duringPayment')
		},
	}
</script>


<style lang="scss" scoped>
	.order-contain {
		padding: 0 20rpx;
	}
	
	.order {
		padding-left: 20rpx;
		margin-top: 20rpx;
		border-radius: 5px;
		background-color: #FFFFFF;
		
		&-header {
			display: flex;
			height: 80rpx;
			align-items: center;
			padding-right: 20rpx;
			border-bottom: $-solid-border;
			
			.order-sn {
				font-size: $-font-size-nr;
			}
			
			.order-status {
				margin-left: auto;
				font-size: $-font-size-sm;
				
				&--primary {
					@include font_color()
				}
				
				&--muted {
					color: $-color-muted;
				}
			}
		}
		
		&-main {
			position: relative;
			
			.leader-icon {
				position: absolute;
				top: 20rpx;
				left: -20rpx;
				z-index: 9;
				padding: 4rpx 20rpx;
				border-radius: 0 60px 60px 0;
				font-size: $-font-size-xs;
				@include background_linear();
				color: #FFFFFF;
			}
			
			.order-desc {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 20rpx;
				font-size: $-font-size-xs;
				color: $-color-muted;
			}
		}
		
		&-footer {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			padding-right: 20rpx;
			border-top: $-solid-border;
			
			.operation {
				box-sizing: border-box;
				padding: 10rpx 30rpx;
				border-radius: 60px;
				font-size: $-font-size-nr;
				
				&--primary {
					@include background_color()
					color: #FFFFFF;
				}
			}
		}
		
	}
</style>
